<script setup lang="ts">
import { CourseListRequest, CourseListResponse } from "@/typings/course";
import { http } from "@/utils/http";
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";

const router = useRouter();
const route = useRoute();
const loading = ref(false);
const refreshing = ref(false);
const tableData = ref<CourseListResponse>({
  total: 0,
  list: []
});
const requestParams = ref<CourseListRequest>({
  businessUserId: Number(route.query.dealerId),
  shopId: Number(route.query.shopId),
  page: 1,
  pageSize: 10
});

// 获取直播列表
async function getCourses() {
  loading.value = true;
  try {
    const response = await http.request<CourseListResponse>({
      url: "/screening/getSubjectAll",
      method: "Post",
      data: requestParams.value
    });
    if (requestParams.value.page === 1) {
      tableData.value = response;
    } else {
      tableData.value = {
        ...response,
        list: [...tableData.value.list, ...response.list]
      };
    }
  } catch (error) {
    showToast("获取直播列表失败");
    console.error("获取直播列表失败:", error);
  } finally {
    loading.value = false;
    refreshing.value = false;
  }
}

onMounted(() => {
  getCourses();
});

const handleNavigate = course => {
  router.push({
    name: "Course",
    query: {
      ...route.query,
      ...course,
      roomId: course.roomId
    }
  });
};

// 加载更多
const loadMore = () => {
  if (tableData.value.list.length >= tableData.value.total) return;
  requestParams.value.page++;
  getCourses();
};

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true;
  requestParams.value.page = 1;
  getCourses();
};
</script>

<template>
  <div class="min-h-screen bg-gradient-to-b from-blue-50 to-white">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="px-4 py-6">
        <!-- Header -->
        <div class="bg-white rounded-2xl p-5 shadow-lg mb-6">
          <div class="flex justify-between items-center">
            <div>
              <div class="text-xl font-bold text-gray-800">直播列表</div>
              <div class="text-gray-500 text-sm">选择你感兴趣的直播</div>
            </div>
            <div class="text-gray-500">共 {{ tableData.total }} 门直播</div>
          </div>
        </div>

        <!-- Course List -->
        <div class="space-y-4">
          <van-skeleton
            title
            :row="3"
            :loading="loading"
            v-for="i in 3"
            :key="i"
            v-if="loading"
          >
            <div class="bg-white rounded-2xl p-5 shadow-lg"></div>
          </van-skeleton>

          <div
            v-for="course in tableData.list"
            :key="course.id"
            class="bg-white rounded-2xl p-5 shadow-lg cursor-pointer transform hover:scale-105 transition-all duration-300"
            @click="handleNavigate(course)"
          >
            <div class="flex items-center space-x-4">
              <div
                class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center"
              >
                <img
                  v-if="course.subjectVideoImg"
                  :src="course.subjectVideoImg"
                  class="w-full h-full object-cover rounded-xl"
                  alt="直播封面"
                />
                <i v-else class="text-blue-500 text-xl">📘</i>
              </div>
              <div class="flex-1">
                <div class="text-lg font-semibold text-gray-800">
                  {{ course.title }}
                </div>
                <div class="text-gray-500 text-sm">
                  <div class="flex items-center space-x-2">
                    <span v-if="course.openStartTime"
                      >开始时间: {{ course.openStartTime }}</span
                    >
                    <span v-if="course.openEndTime"
                      >结束时间: {{ course.openEndTime }}</span
                    >
                  </div>
                  <div class="mt-1">
                    <van-tag v-if="course.subjectStatus === 1" type="success"
                      >进行中</van-tag
                    >
                    <van-tag v-else type="danger">已关闭</van-tag>
                    <van-tag v-if="course.subjectDesc" type="primary">{{
                      course.subjectDesc
                    }}</van-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 加载更多 -->
          <div
            class="text-center py-4"
            v-if="tableData.list.length < tableData.total"
          >
            <van-button
              type="primary"
              size="small"
              :loading="loading"
              @click="loadMore"
            >
              加载更多
            </van-button>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<style scoped>
.from-blue-50 {
  --tw-gradient-from: #eff6ff;
  --tw-gradient-to: #ffffff;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* 添加阴影过渡效果 */
.shadow-lg {
  transition: box-shadow 0.3s ease;
}

.shadow-lg:hover {
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 添加平滑过渡效果 */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
</style>
